<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>图书类别</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <jsp:include page="../../../WEB-INF/common/header.jsp" flush="true"/>

    <div style="padding: 20px"></div>
    <div style="padding-left: 200px;">
        <a class="layui-btn layui-btn-normal" onclick="addType();">添加类别</a>
        <table class="layui-hide" id="demo" lay-filter="test"></table>

        <div class="layui-tab-item layui-show">
            <div id="pageDemo"></div>
        </div>

    </div>
</div>

</body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">

    layui.use(['layer', 'table', 'jquery', 'element'], function () {
        let layer = layui.layer;
        let table = layui.table;
        let $ = layui.jquery;
        layui.element.init();

        // 执行一个table实例
        table.render({
            elem: '#demo',
            height: 550,
            url: '${pageContext.request.contextPath}/type/queryList',
            title: '书籍类别表',
            dataType: 'json',
            cols: [[ //表头
                {field: 'cname', title: '类别名称', width: 300, align: 'center'}
                , {fixed: 'right', title: '操作', width: 300, align: 'center', toolbar: '#barDemo'}
            ]],
        })

        // table监听事件
        table.on('tool(test)', function (obj) {

            let data = obj.data;
            let event = obj.event;
            // 判断操作
            if (event === 'edit') {
                // 编辑
                layer.prompt({
                    title: '修改类别',
                    value: data.cname,
                    formType: 2
                }, function (text, index) {
                    layer.close(index);
                    $.ajax({
                        url: '${pageContext.request.contextPath}/type/edit',
                        data: {'cid': data.cid, 'cname': text},
                        dataType: 'json',
                        method: 'POST',
                        success: function (res) {
                            if (res.success) {
                                window.parent.location.reload();
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    })
                })
            } else if (event === 'del') {
                // 删除
                layer.confirm("确认删除吗？", function (index) {
                    $.ajax({
                        url: '${pageContext.request.contextPath}/type/delType?cid=' + data.cid,
                        type: 'POST',
                        dataType: 'json',
                        success: function (res) {
                            if (res.success) {
                                obj.del();
                                layer.alert(res.message, function () {
                                    window.parent.location.reload();
                                })
                            } else {
                                layer.msg(res.message)
                            }
                        },
                        error: function () {
                            layer.msg("系统异常！")
                        }
                    })
                })
            }
        })
    })

    // 新增书籍类别
    function addType() {
        layui.use(['layer', 'jquery'], function () {
            let layer = layui.layer;
            let $ = layui.jquery;

            layer.prompt({
                title: '新增类别',
                formType: 2
            }, function (text, index) {
                layer.close(index);
                $.ajax({
                    url: '${pageContext.request.contextPath}/type/addType',
                    data: {'cname': text},
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        if (res.success) {
                            layer.alert(res.message, function () {
                                window.location.reload();
                            })
                        } else {
                            layer.msg(res.message);
                        }
                    },
                    error: function (res) {
                        layer.msg("系统异常！");
                    }
                })
            })
        })

    }


</script>
</html>